<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
  <link rel="stylesheet" href="layui/css/layui.css" media="all">
 <script src="layui/layui.js"></script>
</head>
<body>
	<div id="update_users" style="display: none;" onclick="return false;">
		<form id="form_updateUsers" lay-filter="updateHui" class="layui-form"
			action="">
			<input name="Id" type="hidden" />
			<div class="layui-form-item">
				<div class="layui-inline">
					<label class="layui-form-label">用户名:</label>
					<div class="layui-input-inline">
						<input type="tel" name="LoginName"
							class="layui-btn layui-btn-disabled" autocomplete="off"
							class="layui-input">
					</div>
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">邮箱:</label>
				<div class="layui-input-inline">
					<input type="text" name="ProtectEMail" lay-verify="required|email"
						autocomplete="off" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">手机号:</label>
				<div class="layui-input-inline">
					<input type="text" name="protectMTel" lay-verify="required|phone"
						autocomplete="off" class="layui-input">
				</div>
			</div>

			<div class="layui-form-item">
				<div class="layui-input-block">
					<button type="submit" class="layui-btn" lay-submit=""
						lay-filter="updateUsers">确认修改</button>
				</div>
			</div>
		</form>
	</div>

	<div id="div_users" style="display: none;">
		<form lay-filter="huiXian" id="form_users" class="layui-form"
			action="" onclick="return false;">
			<div class="layui-form-item">
				<div class="layui-inline">
					<label class="layui-form-label">用户名:</label>
					<div class="layui-input-inline">
						<input type="tel" name="LoginName" lay-verify="required"
							autocomplete="off" class="layui-input">
					</div>
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">密码:</label>
				<div class="layui-input-inline">
					<input type="text" name="Password" autocomplete="off"
						class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">密保邮箱:</label>
				<div class="layui-input-inline">
					<input type="text" name="ProtectEMail" lay-verify="required|email"
						autocomplete="off" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">密保手机号:</label>
				<div class="layui-input-inline">
					<input type="text" name="protectMTel" lay-verify="required|phone"
						autocomplete="off" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-input-block">
					<button type="submit" class="layui-btn" lay-submit=""
						lay-filter="add">添加</button>
				</div>
			</div>
		</form>
	</div>


	<form class="layui-form" action="">
		<div class="layui-form-item">
			<div class="layui-inline">
				<label class="layui-form-label">用户名:</label>
				<div class="layui-input-inline">
					<input type="text"  id="LoginName" autocomplete="off"
						class="layui-input">
				</div>
			</div>
			<div class="layui-inline">
				<label class="layui-form-label">起止时间</label>
				<div class="layui-input-inline" style="width: 100px;">
					<input type="text" id="beginTime" placeholder="YYYY-HH-DD"
						autocomplete="off" class="layui-input">
				</div>
				<div class="layui-form-mid">-</div>
				<div class="layui-input-inline" style="width: 100px;">
					<input type="text" id="endTime" placeholder="YYYY-HH-DD"
						autocomplete="off" class="layui-input">
				</div>
			</div>

			<div class="layui-inline">
				<label class="layui-form-label">是否锁定</label>
				<div class="layui-input-inline">
					<select id="IsLockout" lay-filter="aihao">
						<option value=""></option>
						<option value="是">是</option>
						<option value="否">否</option>
					</select>
				</div>
			</div>

			<div class="layui-inline">
				<label class="layui-form-label">排序</label>
				<div class="layui-input-inline">
					<select id="LastLoginTime" lay-filter="aihao">
						<option value=""></option>
						<option value="LastLoginTime">最后登录时间</option>
						<option value="CreateTime">账号创建时间</option>
					</select>
				</div>
			</div>

			<div class="layui-inline">
				<div class="layui-input-inline">
					<button type="submit" class="layui-btn" lay-submit=""
						lay-filter="getUsers">立即查询</button>
				</div>
			</div>
		</div>
	</form>

	<table id="demo" lay-filter="test"></table>
 	<div id="test1" style="display: none;"></div>
	<script type="text/html" id="toolbarDemo">
  		<div class="layui-btn-container">
    		<button class="layui-btn layui-btn-sm" lay-event="add">添加</button>
  		</div>
	</script>

	<script type="text/html" id="barDemo">
		<a class="layui-btn layui-btn-xs" lay-event="juese">设置角色</a>
  		<a class="layui-btn layui-btn-xs" lay-event="detail">修改</a>
  		<a class="layui-btn layui-btn-xs" lay-event="edit">重置密码</a>
		<a class="layui-btn layui-btn-xs" lay-event="Unloking">解锁</a>
		<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="lockout">锁定</a>
	</script>
 
		<script>
		layui.use(['table','form','laydate','layer','transfer'], function(){
		  var table = layui.table;
		  var form=layui.form;
		  var laydate=layui.laydate;
		  var layer=layui.layer;
		  var transfer=layui.transfer;
		  var $=layui.$;
		  
		    //执行一个laydate实例
		  laydate.render({
		    elem: '#beginTime' //指定元素
		  });
		  
		  laydate.render({
		    elem: '#endTime' //指定元素
		  });
		  
		  laydate.render({
		    elem: '#LastLoginTime' //指定元素
		  });
		  
		  laydate.render({
		    elem: '#LockTime' //指定元素
		  });
		  
		  laydate.render({
		    elem: '#CreateTime' //指定元素
		  });
		  
		    
		  
		  //第一个实例
		  table.render({
		    elem: '#demo'
		    ,id:'usersTab'
		    ,toolbar: '#toolbarDemo'
		    ,url: 'getUser' //数据接口
		    ,page: true //开启分页
		    ,cols: [[ //表头
		      {field: 'LoginName', title: '用户名'}
		      ,{field: 'IsLockout', title: '是否锁定'}
		      ,{field: 'LastLoginTime', title: '最后一次登录时间'}
		      ,{field: 'PsdWrongTime', title: '密码错误次数'} 
		      ,{field: 'LockTime', title: '被锁定时间'}
		      ,{field: 'ProtectEMail', title: '密保邮箱'}
		      ,{field: 'protectMTel', title: '密保手机号'}
		      ,{field: 'CreateTime', title: '账号创立时间'}
		      ,{fixed: 'right', width:350, align:'center', toolbar: '#barDemo'} //这里的toolbar值是模板元素的选择器
		    ]]
		  });
		  
			  form.on('submit(getUsers)', function(data){
			  			//这里以搜索为例
						table.reload('usersTab',{
						  where: { //设定异步数据接口的额外参数，任意设
						  		LoginName:$("#LoginName").val(),
						  		beginTime:$("#beginTime").val(),
						  		endTime:$("#endTime").val(),
						  		IsLockout:$("#IsLockout").val(),
						  		LastLoginTime:$("#LastLoginTime").val()
						  		
						  }
						  ,page: {
						    curr: 1 //重新从第 1 页开始
						  }
						});
			  return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
		});
		  
				  //触发事件
					table.on('toolbar(test)', function(obj){
					  var checkStatus = table.checkStatus(obj.config.id);
					  switch(obj.event){
					    case 'add':
					      	layer.open({
					      		type:1,
					      		content:$("#div_users"),
					      		area:['600px','600px']
					      	
					      	})   
					    break;
					  };
					});
					
					form.on('submit(add)', function(data){
			  				
			  				$.post("addUsers",$("#form_users").serialize(),function(res){
			  						if(res.code=="0"){
			  								layer.closeAll();
			  								layer.msg("添加成功");
			  								table.reload("usersTab");
			  						}else{
			  								layer.msg("用户名已存在");
			  						}	
			  				},"json")
			  			
			  			
			 		 return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
				});
				
				//工具条事件
				table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
				  var data = obj.data; //获得当前行数据
				  var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
				  var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
				 	
				 	  if(layEvent === 'detail'){
				 	  		form.val("updateHui",data)
				 	  		layer.open({
				 	  				type:1,
				 	  				content:$("#update_users"),
				 	  				area:['600px','600px']
				 	  		})	
				 	  } else if(layEvent === 'edit'){
				 	  			layer.confirm('真的要重置密码吗?', function(index){
								 $.post("updatePSW",{
								 	Id:data.Id
								 },function(res){
								 		if(res.code=="0"){
								 				layer.msg("重置成功");
								 				table.reload("usersTab")
								 		} else{
								 				layer.msg("重置失败")
								 		}
								 },"json")     	     
							});
				 	  }else if(layEvent === 'lockout'){
				 	  			layer.confirm('真的要锁定吗?', function(index){
								 $.post("lockoutUser",{
							      		Id:data.Id,
							      		IsLockout:"是"
							      },function(res){
							      	if(res.code=="0"){
							      		layer.closeAll();
							      		table.reload('usersTab');
							      		layer.msg(res.msg);
							      	}else{
							      		layer.msg(res.msg);
							      	}
							      },"json");     
							});
				 	  }else if(layEvent === 'Unloking'){
				 	  			layer.confirm('真的要解锁吗?', function(index){
								 $.post("unlockingUser",{
							      		Id:data.Id,
							      		IsLockout:"否"
							      },function(res){
							      	if(res.code=="0"){
							      		layer.closeAll();
							      		table.reload('usersTab');
							      		layer.msg(res.msg);
							      	}else{
							      		layer.msg(res.msg);
							      	}
							      },"json");     
							});
				 	  }
				 	  else if(layEvent === 'juese'){
				 	  
				 	  			console.log(data);
				 	  			var jsonStr,v,arr;
				 	  			$.post("getUserroles",{UserId:data.Id},function(res){
				 	  				if(res.code=="0"){
				 	  					//console.log(res.data);
				 	  						jsonStr = JSON.stringify(res.data).toString();
			  								v = JSON.parse(jsonStr);
			  								console.log(v);
			  								arr=new Array();
			  								for(var i=0;i<v.length;i++){
			  									arr[i]=v[i].RoleId;
			  									
			  								}
			  							//transfer.render({
									      //elem: '#test1'  //绑定元素
										      //,value: arr
										  //});
				 	  				}else{}
				 	  			},"json");
		  						
								$.post("getRoles",{},function(res){
			  						if(res.code=="0"){
			  						console.log(arr);
			  								var list=res.data;			  								
			  								  //渲染
									    transfer.render({
									      elem: '#test1'  //绑定元素
									      ,data: list
									      ,value: arr
									      ,parseData: function(res){
											    return {
											      "value": res.Id //数据值
											      ,"title": res.Name //数据标题
											      ,"disabled": res.disabled  //是否禁用
											      ,"checked": res.checked //是否选中
											    }
											  }
									      ,id: 'demo1' //定义索引
									        ,onchange: function(data2, index){
											    console.log(data2); //得到当前被穿梭的数据
											    console.log(data2[0].value); //得到当前被穿梭的数据
											    console.log(index); //如果数据来自左边，index 为 0，否则为 1
											    if(index==0){
											   
											    	for(var i=0;i<data2.length;i++){
											    		$.post("tjUserRoles",{
												    		UserId:data.Id
												    	   ,RoleId:data2[i].value
												    	},function(res){
												    		if(res.code=="0"){
												    			layer.msg(res.msg);
												    		}else{
												    			layer.msg(res.msg);
												    		}
												    	},"json");
											    	}
											    	
											    }else{
											    
											    for(var i=0;i<data2.length;i++){
											    	$.post("scUserRoles",{
											    		UserId:data.Id
											    	   ,RoleId:data2[i].value
											    	},function(res){
											    		if(res.code=="0"){
											    			layer.msg(res.msg);
											    		}else{
											    			layer.msg(res.msg);
											    		}
											    	},"json");
											      }
											    }
											 }
									    });
			  						}else{
			  								layer.msg("错误");
			  						}	
			  				},"json");
				 	  			layer.open({
				 	  				title:data.LoginName,
				 	  				type:1,
				 	  				content:$("#test1"),
				 	  				area:['600px','600px']
				 	  		})
				 	  }
				 
			});
			
			form.on('submit(updateUsers)', function(data){
						$.post("updateUsers",$("#form_updateUsers").serialize(),function(res){
				 	  					if(res.code=="0"){
				 	  							layer.closeAll();
				 	  							layer.msg("修改成功");
				 	  							table.reload("usersTab");
				 	  					} else{
				 	  							layer.msg("修改失败");
				 	  					}
				 	  		},"json")

			 		 return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
				});
					
	});
</script>

</body>
</html>